<template>
  <v-data-table
    :value="selected"
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    loading-text="正在加载中，请稍后"
    item-key="id"
    :show-select="isSelected"
    @input="updateSelected"
  >
    <template v-slot:top>
      <v-text-field
        v-model="search"
        prepend-inner-icon="search"
        label="Search"
        single-line
        hide-details
        filled
      />
    </template>
    <template v-slot:item.rolename="{ item }">
      <v-edit-dialog
        :return-value.sync="item"
        large
        @save="updateRole({ id: item.id })"
      >
        <div>{{ item.rolename }}</div>
        <template v-slot:input>
          <div class="mt-4 title">Update Role</div>
        </template>
        <template v-slot:input>
          <v-select
            :value="getRole(item)"
            :items="roles"
            :rules="roleRules"
            item-text="name"
            item-value="id"
            label="Role"
            return-object
            @input="setNewRole"
          />
        </template>
      </v-edit-dialog>
    </template>
    <template v-slot:item.actions="{ item }">
      <DiaLogtable
        class="tablebutton"
        :items="item"
      ></DiaLogtable>
      <!-- <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
      <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon> -->
    </template>
    <template v-slot:item.number="{ item }">
      {{ item.user }}
      <!-- <DiaLogtable class="tablebutton" :items="item"></DiaLogtable> -->
      <!-- <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon> -->
      <!-- <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon> -->
    </template>
  </v-data-table>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
import DiaLogtable from '@/components/organisms/layout/DiaLogtable'
import { roleRules } from '@/rules/index'

export default {
  data() {
    return {
      headers: [
        {
          text: '姓名',
          align: 'left',
          sortable: false,
          value: 'username'
        },
        {
          text: '角色权限',
          value: 'rolename'
        },
        {
          text: '分配数量',
          align: 'center',
          value: 'number'
        },
        {
          text: '操作',
          align: 'center',
          value: 'actions',
          sortable: false
        }
      ],
      search: '',
      newRole: null,
      roleRules,
      isSelected: true
    }
  },
  components: {
    DiaLogtable
  },
  computed: {
    ...mapState('members', ['items', 'selected', 'loading']),
    ...mapGetters('roles', ['roles'])
  },

  async created() {
    await this.getMemberList({
      projectId: this.$route.params.id
    })
    console.log(this.items)
    this.getRoleList()
  },
  updated() {
  },
  destroyed() {
  },
  methods: {
    ...mapActions('members', ['getMemberList', 'updateMemberRole']),
    ...mapMutations('members', ['updateSelected']),
    ...mapActions('roles', ['getRoleList']),
    editItem(item) {
      console.log(item)
    },
    getRole(item) {
      return {
        id: item.role,
        userId: item.user,
        mappingId: item.id
      }
    },

    setNewRole(value) {
      this.newRole = value
    },

    updateRole(payload) {
      this.updateMemberRole({
        projectId: this.$route.params.id,
        id: payload.id,
        role: this.newRole.id
      })
    }
  }
}
</script>
<style scoped>
.tablebutton {
  /* position: absolute; */
  /* right: 0; */
}
</style>
